<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }">
        <el-menu :default-active="$route.path" background-color="#345" text-color="#bbb" :style="{ height: '100vh' }"
          :collapse="isCollapse" class="el-menu-vertical-demo" router>
          <el-menu-item>
            <template slot="title">
              <span class="el-icon-video-camera" style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;影视推荐后台</span>
            </template>
          </el-menu-item>
          <!-- 权限管理 -->
          <template v-for="item in menu">
            <el-submenu v-if="item.children" :index="item.path" :key="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>

              <el-menu-item v-for="item2 in item.children" :index="item2.path" :key="item2.path">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">{{ item2.name }}</span>
              </el-menu-item>
            </el-submenu>

            <el-menu-item v-else :index="item.path" :key="item.id">
              <i :class="item.icon"></i>
              <template slot="title">
                {{ item.name }}
              </template>
            </el-menu-item>

          </template>
          <!-- 判断 -->
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-notebook-2" @click="isCollapse = true"></i>
          <i v-show="isCollapse" class="el-icon-notebook-1" @click="isCollapse = false"></i>
          <!-- 面包屑导航 -->
          <el-breadcrumb style="flex:1; margin-left: 20px;" v-if="$route.meta" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in $route.meta.crumb" :key="item" :to="item.split(':')[1]">
              {{ item.split(':')[0] }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <span>
            <!-- {{  this.$store.state.user.nickname }} &nbsp;&nbsp; -->
            {{ user[0].nickname }} &nbsp;&nbsp;
            {{ user[0].email }} &nbsp;&nbsp;
            <b v-if="user[0].root == 1">超级管理员</b>
            <b v-else>普通管理员</b>
            <!-- <b>111</b> -->
          </span>
          &nbsp;&nbsp;
          <el-button type="mini" @click="exit">退出</el-button>
          <!-- <b>{{ cityname }}</b> -->
        </el-header>

        <el-main>
          <!-- 二级路由占位符 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      isCollapse: false,

    }
  },
  computed: {
    ...mapState(['user', 'cityname', 'menu'])
  },
  methods: {
    exit () {
      console.log('退出登录');
      this.$confirm("是否退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        sessionStorage.clear()
        this.$router.push('/user/login')
      });
    }
  },

  mounted () {
    // 带着token发请求, 获取所有的菜单信息
    // this.menu = res.data.data
    // let arr = storage.get('user', payload)
    // console.log(arr);
    // console.log(user[0]);
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
<style lang="scss">
* {
  background-color: transparent !important;
  color: #ffffff;
}

i {
  color: #ffffff !important;
}

button {
  border-color: #ffffff !important;
}

#app>div>section>section>main>div>form>div:nth-child(1)>label {
  color: #ffffff;
}

#app>div>section>section>main>div>form>div>label {
  color: #ffffff;
}

#app>div>section>section>header>div>span>span {
  color: #ffffff;

}

// 头部背景色
#app>div {
  // background-image: linear-gradient(125deg, #e78989, #dcdf8c, #71a9d2);
  background-image: url(../assets/bg8.jpg);
  background-size: 100% 100%;
  // background-size: cover;
  // opacity: 0.8;
}

// 左侧背景色
#app>div>section>aside>ul {
  background-color: transparent !important;



  div {
    background-color: transparent !important;
  }

  li {
    // background-color: #001529 !important;
    // background-color: #001529 !important;
    background-color: transparent !important;
    color: white;
  }
}

#app>div>section>aside>ul>li.el-submenu.is-active.is-opened>ul>li {
  background-color: transparent !important;

}

#app>div>section>aside>ul>li.el-submenu.is-active.is-opened>ul>li.el-menu-item.is-active {
  background-color: transparent !important;

}

// 分割线
#app>div>section>section>main>div>div.el-divider.el-divider--horizontal>div {
  background-color: #f0f2f5 !important;
}

// 中心 main组件
#app>div>section>section>main {

  // background-color: #f0f2f5 !important;
  background-color: transparent !important;

  padding-left: 0;
  padding-right: 0;
}

// main 中的div
#app>div>section>section>main>div {
  // opacity: 0.5;
  padding: 10px 20px;
  background-color: transparent !important;
}

#app>div>section>section>main>div>div:nth-child(3)>div.el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition {
  background-color: transparent !important;

}

// 分割线容器
#app>div>section>section>main>div>div.el-divider.el-divider--horizontal {
  padding: 0;
}

// 左侧的大排行兰样式
#app>div>section>aside>ul>li.el-submenu.is-active.is-opened>div>span {
  color: white;
}

#app>div>section>aside span {
  color: white;
}

#app>div>section>aside>ul>li {
  color: white !important;

}
</style>
